<template>
	<div>
		<i @click="showLeftBarFun" v-show="!showLeftBar"></i>
		<div v-show="showLeftBar" class="leftBar">
			<div class="choosetoplayleft">
				<div class="choosetheplay">选择玩法</div>
				<ul class="playList">
					<li v-for="(item,index) in wanfOddsList" :key="index"  :class="{'choosedactive':wanfOddsIndex ==index}" v-if="item.list[0].subList.length">
						<Dropdown placement="right-start" v-if="item.list.length>1" @on-click="subNavClick">
							<a href="javascript:void(0)" @click="navClick(index)">
								{{item.name}}
							</a>
							<DropdownMenu slot="list">
								<DropdownItem v-for="(itemChild,childindex) in item.list" :name="index + '--' + childindex" :key="childindex" v-if="itemChild.subList.length&&item.name!='猜庄闲' &&item.name!='冠亚和' &&item.name!='猜冠亚'">
									<a href="javascript:void(0)" @click.prevent="custormAnchor(`odds${childindex}`)" :title="itemChild.subName">{{itemChild.subName}}</a>
								</DropdownItem>
							</DropdownMenu>
						</Dropdown>
						<!-- <span class="otherf1" @click="changePlay(index)" v-else>wanfOddsIndex -->
						<span v-else class="otherf1" @click="navClick(index)">{{item.name}}</span>
					</li>
				</ul>
			</div>

			<div class="choosetoplaycenter">
				<div class="centermain" id="centermain">
					<div class="top">
						<ul>
							<li :class="{activebottomline:!isZhuiHao}" @click="setZhuiHao(false)">投注</li>
							<li :class="{activebottomline:isZhuiHao}" @click="setZhuiHao(true)">追号</li>
							</ul>
					</div>
					<!-- 猜双面 -->
					<div class="center">
						<ul>
							<li v-if="chekedMethod!=6 || renderGYH_gy!=null" class="liTit">
								{{wanfOddsList[wanfOddsIndex].name}}
							</li>
							<li v-else></li>
							<li @click="declareModel = true">
								<em></em>&nbsp;赔率说明
							</li>
						</ul>
					</div>
					<div class="bigorsmall">
						<div v-for="(data, dataindex) in wanfOddsList[wanfOddsIndex].list" :key="dataindex" v-if="data.subList.length>1">
							<!-- <h3 :id="`odds${dataindex}`">{{data.subName}}</h3> -->
							<div class="h3Tit" :id="`odds${dataindex}`">
								<template v-if="wanfOddsList[wanfOddsIndex].name == '猜庄闲'">
									
								</template>
								<template v-else-if="wanfOddsList[wanfOddsIndex].name == '猜冠亚'">
									
								</template>
								<template v-else-if="wanfOddsList[wanfOddsIndex].name == '冠亚和'">
									<template v-if="data.subName == '冠亚'">

									</template>
									<template v-else-if="data.subName == '和'">
										<h3>猜数字</h3>
									</template>
									<template v-else-if="data.subName == '区段'">
										<h3>猜区段</h3>
									</template>
								</template>
								<template v-else-if="data.subName">
									<h3>{{data.subName}}</h3>
								</template>
								<!-- <span>{{data.subName}}</span> -->
							</div>
							<div v-if="data.subName == '区段'" class="guanyahe">
								<p v-for="(item,index) in data.subList" :key="index" class="chooseSytle" @click="checkOdds(dataindex,item.title,index)" v-bind:class="{checkedStyle:checkedOdd.indexOf(dataindex+'_'+index) != -1 }">
									<span>{{item.title.indexOf('_') >= '0' ? item.title.split('_')[1]: item.title}}</span>
									<span>{{item.desc.substring(item.desc.indexOf('于')+1,item.desc.indexOf('之'))}}</span>
									<span>{{item.value}}</span>
								</p>
							</div>
							<div v-else-if="wanfOddsList[wanfOddsIndex].name == '长龙投注'">
								<div v-for="(item,index) in data.subList" :key="index">
									<div class="clTitle"><span>{{item.way}}</span><span>{{item.num}}期</span></div>
									<ul>
										<li v-for="(item1,index1) in item.data" :key="index1" class="chooseSytle" @click="checkOdds(index1,item1.way,index)" v-bind:class="{checkedStyle:checkedOdd.indexOf(index1+'_'+index) != -1 }">
											<P>{{item1.way.indexOf('_') >= '0' ? item1.way.split('_')[1]: item1.way}}</P>
											<p>{{item1.odds}}</p>
									</li>
								</ul>
								</div>
							</div>
							<ul class="playMethod-list" v-else>
								<li v-for="(item,index) in data.subList"  :key="index" class="chooseSytle" @click="checkOdds(dataindex,item.title,index)" v-bind:class="{checkedStyle:checkedOdd.indexOf(dataindex+'_'+index) != -1 }">
									<template v-if="wanfOddsList[wanfOddsIndex].name == '猜车号'">
										<p class="springF"><span :class="selectNum(item.title.indexOf('_') >= '0' ? item.title.split('_')[1]: item.title)"></span></p>
										<p>{{item.value}}</p>
									</template>
									<template v-else-if="wanfOddsList[wanfOddsIndex].name == '猜冠亚'">
										<p class="springF"><span :class="selectNum(item.title >= '0' ? item.title : item.title)"></span></p>
										<p>{{item.value}}</p>
									</template>
									<template v-else>
										<p>{{item.title.indexOf('_') != -1 ? item.title.split('_')[1]: item.title}}</p>
										<p>{{item.value}}</p>
									</template>
									<!-- <p>{{item.title.indexOf('_') != -1 ? item.title.split('_')[1]: item.title}}</p> -->
									<!-- <p>{{item.title.indexOf('_') != -1 ? item.title.split('_')[1]: item.title}}</p> -->
								</li>
							</ul>
						</div>
						
					</div>
				</div>
			
			
				<!-- 投注操作区 -->
				<div class="choosetoplayfooter" id="choosetoplayfooter" v-show="!isZhuiHao">
					<div class="havebet">
						<p>已选&nbsp;
						<span>{{oddsWay.length}}</span>&nbsp;注，共&nbsp;
						<span>{{totalMoney}}</span>&nbsp;元宝</p>
					</div>
					<div class="inputbet">
						<InputNumber @on-change="checkedMoneyIdx=null" :min='1' type="text" placeholder="请输入下注金额" :formatter="(value)=> `${Math.round(value)}`" :parser="(value)=> `${Math.round(value)}`" v-model="checkedMoney" style="width:200px !important"></InputNumber>
						<span @click="minBetAdd()">最小投注</span>
					</div>
					<div class="bet">
						<ul>
							<li v-for="(item,index) in moneyList" @click="checkMoney(index,item)" :key="index" v-bind:class='{ckMoneyStyle:index==checkedMoneyIdx}'>{{item>=1000 ? Number(item)/1000 + 'K' : item}}</li>
							<li @click="checkMoney(100,'梭哈')" v-bind:class='{ckMoneyStyle:checkedMoneyIdx==100}'>梭哈</li>
						</ul>
					</div>
					<div class="reset">
						<Button type="primary" @click="openOddsDlg()" :disabled="disableBtn">确认下注</Button>
						<Button type="primary" @click="resetOdds()">重置</Button>
					</div>
				</div>

				<!-- 追号操作区 -->
				<div class="zhPanel" id="zhPanel" v-show="isZhuiHao">
					<div class="zfInput">
						追<InputNumber type="text" :max="100" :min="1" placeholder="" v-model="manyQi" style=""></InputNumber>期&nbsp;&nbsp;
						翻<InputNumber type="text" :min="1" placeholder="" v-model="manyBei" style=""></InputNumber>倍
					</div>
					<InputNumber type="text" placeholder="请输入下注金额" class="moneyInput" v-model="checkedMoney"></InputNumber>                
					<div class="btnBox">
						<Button type="primary" @click="setZhDlg(true)" :disabled="disableBtn">生成追号</Button>
					</div>
				</div>

				<!-- 点击收缩左边的两栏 -->
				<em class="shrink" @click="showLeftBarFun" v-show="showLeftBar"></em>
			</div>
      	</div>
		
		<Modal
			v-model="sendOddsDlg"
			class-name=""
			:closable="false"
			:scrollable="true"
			:mask-closable="false"
		>
			<p slot="header">第{{timeMessages.issue}}期，下注清单</p>
			<Table height="300" :columns="columns1" :data="oddsTableData" style="font-size:14px;" v-if="oddsTableData.length>0"></Table>
			<div class="tableNoData" v-else>
				<img src="@/assets/images/tableNoData.png" alt="">
			</div>
			<div slot="footer">
				<p class="tableTip">共<span>{{oddsWay.length}}</span>注，金额<span>{{totalMoney}}</span></p>
				<Button @click="closeOddsDlg">取消</Button>            
				<Button type="primary" @click="sendOdds" :disabled="oddsTableData.length<1||stopBet" :loading="sendFlag">确认投注</Button>
			</div>
		</Modal>
		<Modal
			v-model="showZhDlg"
			class-name=""
			title="追号清单"
			width="600"
			:scrollable="true"
			:mask-closable="false"
		>
			<div class="zhPanel2">
				追<InputNumber type="text" :max="100" :min="1" placeholder="" v-model="manyQi" style=""></InputNumber>期&nbsp;&nbsp;
				翻<InputNumber type="text" :min="1" placeholder="" v-model="manyBei" style=""></InputNumber>倍
				<InputNumber type="text" placeholder="请输入下注金额" class="moneyInput2" v-model="checkedMoney"></InputNumber>          
				<Button type="primary" @click="setZhDlg(true)">生成追号</Button>
			</div>
			<Table height="300" :columns="columns2" :data="zhTableData" style="font-size:14px;"></Table>
			<p class="zjjtP"><Checkbox v-model="zhType">中奖即停</Checkbox></p>        
			<div slot="footer">
				<p class="tableTip">共<span>{{manyQiNow}}</span>注，金额<span>{{totalZhMoney}}</span></p>
				<Button @click="setZhDlg(false)">取消</Button>            
				<Button type="primary" @click="confromZh()" :disabled="zhTableData.length<1||stopBet">确认投注</Button>
			</div>
		</Modal>
		<Modal
			v-model="declareModel"
			title="赔率说明"
			@on-ok="declareModel = false"
			cancel-text
			ok-text="关闭"
			:scrollable="true"
			width='600'
		>
			<p style="max-height: 500px;overflow-y: auto;">
			<pre v-html="RoomDateList"></pre>
			</p>
		</Modal>
	</div>
</template>

<script>
import {websocketsend} from '@/common/js/websocket';
import _ from 'lodash';
import removeImg from '@/assets/images/remove.png';
import { mapGetters, mapActions } from "vuex";
import { timeFormat } from "@/assets/js/dom"

import router from "@/router";
export default {
	props:['oddsData','timeMessages','cRoomData','BetmoneyList','bindAbsClass','lDragonData'],
	data() {
		return {
			sendFlag: false,
			playMethod: null,
			issue:'',//当前期号
			checkedOdd:[],//赔率
			moneyList:[5,10,50,100,500],//下注金额
			checkedMoney:1,//金额
			checkOddData:false,//提交投注校验
			checkedMoneyIdx:0,
			checkedOddIndex:0,
			oddsWay:[],//投注数组
			moneyArr:[],//金额数组
			totalMoney:0,
			isZhuiHao:false,//是否是追号
			showZhDlg:false,//追号面板
			zhTableData:[],//追号tabledata
			zhBetData:[],//追号data                                        
			zhType:true,//中奖即停                    
			manyQi:1,//追几期
			manyQiNow:1,
			manyBei:1,//翻几倍
			totalZhMoney:0,//追号总金额
			sendOddsDlg: false,
			chekedMethod: 1,//选中的玩法
			methodsArr: ['猜双面-冠军','猜车号','猜龙虎','猜庄闲','猜冠亚','冠亚和'],
			gymodel:false,//冠亚和未单独的model
			columns1: [//投注表格内容自定义
				{
					title: '玩法',
					key: 'name',
					align:'center',
				},
				{
					title: '内容',
					key: 'type',
					align:'center',                        
				},
				{
					title: '金额',
					key: 'money',
					align:'center',
					render: (h, params) => {
						return h('InputNumber', {
							props: {
								value: this.moneyArr[params.index],
								formatter: (value)=> `${Math.round(value)}`,
								parser: (value)=> `${Math.round(value)}`,
								max: 10000,
								min:1
							},
							style: {width:'80px',"textAlign":'center'},
							on: {
								input:(e) => {
									this.totalMoney = 0;
									this.$set(this.moneyArr, params.index, e);
									for(var i=0; i<this.moneyArr.length; i++) {
										this.totalMoney += this.moneyArr[i];
									}
								}
							}
						})
					}
				},
				{
					title: '撤单',
					key: 'remove',
					align: 'center',
					render: (h, params) => {
						return h('img', {
							attrs: {
								src:removeImg
							},
							style: {cursor:'pointer',"vertical-align":'middle'},
							on: {
								click:() => {
									if (this.wanfOddsList[this.wanfOddsIndex].name == '猜冠亚') {
										this.totalMoney = (this.totalMoney - this.moneyArr[params.index]);
										this.oddsTableData.splice(params.index, 1);
										this.moneyArr.splice(params.index, 1);
										this.oddsWay = []
										this.checkedOdd = []
										this.guessGY = [];
									} else {
										this.totalMoney = (this.totalMoney - this.moneyArr[params.index]);
										this.oddsTableData.splice(params.index, 1);
										this.moneyArr.splice(params.index, 1);
										this.oddsWay.splice(params.index, 1);
										this.checkedOdd.splice(params.index, 1);
									}
								}
							}
						})
					}
				}
			],
			columns2: [{
					title: '期号',
					key: 'issue',
					align: 'center',
				},
				{
					title: '投注金额',
					key: 'money',
					align: 'center',
				},
				{
					title: '翻倍',
					key: 'multiple',
					align: 'center',
				},
			],
			oddsTableData: [],
			wanfOdds:[//玩法菜单数据组织
				{
					name:"猜双面",
					set:['冠军','亚军','第三名','第四名','第五名','第六名','第七名','第八名','第九名','第十名'],
					panel:[]
				},
				{
					name:"猜车号",
					set:['冠军','亚军','第三名','第四名','第五名','第六名','第七名','第八名','第九名','第十名'],
					panel:[]
				},
				{
					name:"猜龙虎",
					set:['冠军','亚军','第三名','第四名','第五名'],
					panel:[]
				},
				{
					name:"猜庄闲",
					panel:[]
				},
				{
					name:"猜冠亚",
					panel:[]
				},
				{
					name:"冠亚和",
					panel:[]
				}
			],
			wanfOddsList: [
				{
					name: '猜双面',
					list: [
						{
							subName: '冠军',
							subList: []
						},
						{
							subName: '亚军',
							subList: []
						},
						{
							subName: '第三名',
							subList: []
						},
						{
							subName: '第四名',
							subList: []
						},
						{
							subName: '第五名',
							subList: []
						},
						{
							subName: '第六名',
							subList: []
						},
						{
							subName: '第七名',
							subList: []
						},
						{
							subName: '第八名',
							subList: []
						},
						{
							subName: '第九名',
							subList: []
						},
						{
							subName: '第十名',
							subList: []
						}
					]
				},
				{
					name: '猜车号',
					list: [
						{
							subName: '冠军',
							subList: []
						},
						{
							subName: '亚军',
							subList: []
						},
						{
							subName: '第三名',
							subList: []
						},
						{
							subName: '第四名',
							subList: []
						},
						{
							subName: '第五名',
							subList: []
						},
						{
							subName: '第六名',
							subList: []
						},
						{
							subName: '第七名',
							subList: []
						},
						{
							subName: '第八名',
							subList: []
						},
						{
							subName: '第九名',
							subList: []
						},
						{
							subName: '第十名',
							subList: []
						}
					]
				},
				{
					name: '猜龙虎',
					list: [
						{
							subName: '冠军',
							subList: []
						},
						{
							subName: '亚军',
							subList: []
						},
						{
							subName: '第三名',
							subList: []
						},
						{
							subName: '第四名',
							subList: []
						},
						{
							subName: '第五名',
							subList: []
						}
					]
				},
				{
					name: '猜庄闲',
					list: [
						{
							subName: '庄闲',
							subList: []
						},
						
					]
				},
				{
					name: '猜冠亚',
					list: [
						{
							subName: '冠亚',
							subList: []
						},
					]
				},
				{
					name: '冠亚和',
					list: [
						{
							subName: '冠亚',
							subList: []
						},
						{
							subName: '和',
							subList: []
						},
						{
							subName: '区段',
							subList: []
						},
					]
				}
			],
			wanfOddsIndex: 0,
			
			renderGYH_gy:null,//猜亚和数据盒子
			renderGYH_num:null,//猜亚和数据盒子
			renderGYH_zd:null,//猜亚和数据盒子
			guessGY:[],//猜亚冠数据组织盒子
			declareModel:false,//
			RoomDateList:null,//房间信息
			roomId:null,//房间id
			lottery_type: null, // 彩种类型
			betLower: 1,
			showLeftBar:true,
			disableBtn: true,
      token: localStorage.getItem('token')
		}
	},
	created() {
		this.roomId = this.$route.query.id
		this.lottery_type = this.$route.query.lottery_type
		if(this.lottery_type == 4){
			this.wanfOdds[1].name = '猜号码'
			this.methodsArr[1] = '猜号码'
		}
	},
	mounted() {
	
	},
	computed: {
		...mapGetters(["accountData","serTime","userInfo","stopBet"])
	},

	methods: {
		custormAnchor(anchorName) { //锚点
			let anchorElement = document.getElementById(anchorName);
			var centermain = document.getElementById('centermain')
			centermain.scrollTop= anchorElement.offsetTop + 100
		},
		showLeftBarFun: function() {
			this.showLeftBar=!this.showLeftBar
			setTimeout(() => {
				var chatcontent = document.getElementById('chatcontent')
				var sendmsg = document.getElementById('sendmsg')
				sendmsg.style.width=chatcontent.offsetWidth+'px'
				var askRoadPanel = document.getElementById('askRoadPanel')
				// askRoadPanel.style.width=chatcontent.offsetWidth+'px'
				askRoadPanel.style.right=-chatcontent.offsetWidth+'px'
			});
		},
		setZhuiHao(flag) { //打开或关闭追号面板
			this.resetOdds();
			this.isZhuiHao = flag;
		},
		setZhDlg:function(flag) {//设置追号数据
			if (flag) {
				if (this.checkedOddIndex == -1) {
					this.$Message.info('请选择玩法');
					return;
				}
				var issue = this.issue;
				var zhTableData = [];
				var zhBetData = [];
				var totalZhMoney = 0;
				this.manyQi = Math.round(this.manyQi );
				this.manyQiNow = this.manyQi;
				if(this.manyQi > 100){
					this.$Message.info('最多追加100期！');
					this.manyQi = 100
					return
				}
				this.manyBei = Math.round(this.manyBei);
				this.checkedMoney = Math.round(this.checkedMoney);
				for (var i=1; i<=this.manyQi; i++) {
					totalZhMoney += this.checkedMoney * Math.pow(this.manyBei, i-1);
					zhTableData.push({
						issue: issue,
						money: this.checkedMoney * Math.pow(this.manyBei, i-1) + '元宝',
						multiple: Math.pow(this.manyBei, i-1) + '倍'
					});
					if (this.wanfOddsList[this.wanfOddsIndex].name == '猜冠亚') {
						zhBetData.push({
							'qihao': issue,
							'money': this.checkedMoney * Math.pow(this.manyBei, i-1),
							'single_money': this.checkedMoney,
							'way': '冠亚_' + this.guessGY[0] + '_' + this.guessGY[1],
							'multiple': Math.pow(this.manyBei, i-1),
						});
					} else if (this.wanfOddsList[this.wanfOddsIndex].name == '长龙投注') {
						var arr2 = this.checkedOddIndex.split("_");
						console.log(arr2,'arr')
						zhBetData.push({
							qihao: issue,
							money: this.checkedMoney * Math.pow(this.manyBei, i-1),
							single_money: this.checkedMoney,
							way: this.wanfOddsList[this.wanfOddsIndex].list[0].subList[arr2[1]].data[arr2[0]].way,
							multiple: Math.pow(this.manyBei, i-1)
						});
					} else {
						zhBetData.push({
							'qihao': issue,
							'money': this.checkedMoney * Math.pow(this.manyBei, i-1),
							'single_money': this.checkedMoney,
							'way': this.oddsWay[0],
							'multiple': Math.pow(this.manyBei, i-1),
						});
					}
					issue++;
				}
				this.totalZhMoney = totalZhMoney;
				this.zhTableData = zhTableData;
				this.zhBetData = zhBetData;
			}
			this.showZhDlg = flag;
		},
		confromZh: function() { //追号确认
			this.$Modal.confirm({
				content: '<p>本期追号投注：' + this.manyQiNow + '期，共' + this.totalZhMoney + '元宝</p>',
				scrollable: true,
				loading: true,
				onOk: () => {
					const agentData = {
        		token: this.token,
						"commandid": "3019",
						"nickname": JSON.parse(localStorage.getItem("userData")).nickname,
						"data": this.zhBetData,
						"win_stop": this.zhType?1:0,
						"avatar": JSON.parse(localStorage.getItem("userData")).avatar
					};
					websocketsend(agentData);
					this.showZhDlg = false;
				}
			});
		},
		checkOdds(dataindex, title, index) { //选中操作
			var newStr = dataindex + '_' + index;
			if (this.wanfOddsList[this.wanfOddsIndex].name == '猜冠亚') {
				if (this.checkedOdd.length < 2) {
					if (this.checkedOdd.indexOf(newStr) == -1) {
						this.checkedOdd.push(newStr);
						this.guessGY.push(title);
						if (this.guessGY.length == 2) {
							this.checkedOddIndex = newStr;
							this.oddsWay = []
							let datas = '冠亚_' + this.guessGY[0] + '_' + this.guessGY[1]
							this.oddsWay.push(datas);
							this.totalMoney = this.oddsWay.length * this.checkedMoney;
						} else {
							this.oddsWay = []
							this.totalMoney = this.oddsWay.length * this.checkedMoney;
						}
					} else {
						for (var i=0; i<this.checkedOdd.length; i++) {
							if(this.checkedOdd[i] == newStr){
								this.checkedOdd.splice(i, 1);
								this.guessGY.splice(i, 1);
								this.oddsWay = []
								this.totalMoney = this.oddsWay.length * this.checkedMoney;
							}
						}
					}
				} else if (this.checkedOdd.length == 2) {
					if (this.checkedOdd.indexOf(newStr) == -1) {
						this.$Message.warning('已选择两个数字！');
					} else {
						for(var i=0; i<this.checkedOdd.length; i++) {
							if (this.checkedOdd[i] == newStr) {
								this.checkedOdd.splice(i, 1);
								this.guessGY.splice(i, 1);
								this.oddsWay = []
								this.totalMoney = this.oddsWay.length * this.checkedMoney;                        
							}
						}
					}
				}
				if (this.checkedOdd.length < 2) {
					this.disableBtn = true;
				} else {
					this.disableBtn = false;
				}
			} else {
				this.checkedOddIndex = dataindex + '_' + index; 
				if (this.checkedOdd.length > 0) {
					var flag = true;
					for (var j=0; j<this.checkedOdd.length; j++) {
						if (this.checkedOdd[j] == newStr) { //已选中
							this.checkedOdd.splice(j, 1);
							this.oddsWay.splice(j, 1);
							this.totalMoney = this.oddsWay.length * this.checkedMoney;  
							flag = false; 
							break;                  
						}
					}
					if (flag) {
						this.checkedOdd.push(newStr);
						this.oddsWay.push(title);
						this.totalMoney = this.oddsWay.length * this.checkedMoney;
					}
					if (this.checkedOdd.length < 1) {
						this.disableBtn = true;
					} else {
						this.disableBtn = false;
					}
				} else {
					this.disableBtn = false;
					this.checkedOdd.push(newStr);
					this.oddsWay.push(title);
					this.totalMoney = this.oddsWay.length * this.checkedMoney;
				}
				console.log(this.checkedOdd, 'this.checkedOdd')
			}

			if (this.isZhuiHao == true) {
				if (this.wanfOddsList[this.wanfOddsIndex].name == '猜冠亚') {
					this.oddsWay = []
					let datas = '冠亚_' + this.guessGY[0] + '_' + this.guessGY[1]
					this.oddsWay.push(datas);
					if (this.checkedOdd.length < 2) {
						this.disableBtn = true;
					} else {
						this.disableBtn = false;
					}
				} else {
					if (this.checkedOdd.length < 1) {
						this.disableBtn = true;
					} else {
						this.disableBtn = false;
					}
					this.checkedOdd = [newStr]
					this.oddsWay = [title]
					this.totalMoney = this.oddsWay.length * this.checkedMoney
				}
			}
		},

		checkMoney(index, item) {
			if (item == '梭哈') {
				let accountData = this.accountData.money_usable
				this.checkedMoney = Math.round(Number(accountData));
				this.checkedMoneyIdx = index;
				this.totalMoney = this.checkedMoney * this.checkedOdd.length;
			} else {
				this.checkedMoney = item;
				this.checkedMoneyIdx = index;
				this.totalMoney = this.checkedMoney * this.checkedOdd.length;
			}
		},
		resetOdds() {
			this.zhBetData = [];
			this.zhTableData = [];
			this.manyBei = 1;
			this.manyQi = 1;
			this.checkedOddIndex = -1;
			this.checkedOdd = [];
			this.oddsWay = [];
			this.guessGY = [];
			this.checkedMoney = this.moneyList[0];
			this.checkedMoneyIdx = 0;
			this.totalMoney = 0;
			this.disableBtn = true;
		},
		closeOddsDlg: function() {
			this.totalMoney = this.checkedMoney * this.oddsWay.length;
			this.sendOddsDlg = false;
		},
		openOddsDlg: function() {
			let newMoneyArr = [];
			let newOddsArr = [];
			for (var i=0; i<this.oddsWay.length; i++) {
				newOddsArr.push({
					name: this.wanfOddsList[this.wanfOddsIndex].name,
					type: this.oddsWay[i],
					money: Math.round(this.checkedMoney),
					remove: '删除'
				});
				this.checkedMoney = Math.round(this.checkedMoney)
				newMoneyArr.push(Math.round(this.checkedMoney));
			}
			this.moneyArr = newMoneyArr;
			this.oddsTableData = newOddsArr;
			this.sendOddsDlg = true;
		},
		sendOdds:function() {
			this.sendFlag=true
      setTimeout(()=>{
        this.sendFlag=false
      },1000)
			const agentData = {
        "token": this.token,
				"commandid":"3006",
				"nickname":JSON.parse(localStorage.getItem("userData")).nickname,
				"way":this.oddsWay,
				"money":this.moneyArr,
				"avatar":JSON.parse(localStorage.getItem("userData")).avatar
			};
			var way = this.oddsWay
      var money = this.moneyArr
      var uniNo = new Date().getTime()+Math.floor(Math.random()*900)+100
      var params = {
        user_id: this.userInfo.id,
        lottery_type: this.$route.query.lottery_type,
        room_id: this.$route.query.id,
        nickname: this.userInfo.nickname,
        money: JSON.stringify(money),
        issue: this.issue,
        way: JSON.stringify(way),
        serTime: this.serTime,
        uniNo: uniNo,
        token: this.token,
      }
      let lotRstData={
        isHttp: true,
        isLoading: true,
        avatar: this.userInfo.avatar,
        commandid: 30007,
        issue: this.issue,
        money: money,
        nickname: this.userInfo.nickname,
        time: timeFormat(new Date().getTime()),
        total_money: this.totalMoney,
        total_zushu: this.checkedOdd.length,
        uid: this.userInfo.id,
        uniNo: uniNo,
        sort: this.userInfo.honor.sort,
        serTime: this.serTime,
        order_no: '',
        way: way,
        loadingFailed: false,
        failedText: '',
      }
      this.$store.commit('setLotRstData', lotRstData)
      this.$http.post(this.urlRequest + "?m=api&c=workerman&a=http_betting", params).then(result=>{
        result=result.data
        if(result.commandid!=3007){
          var failedObj = JSON.parse(JSON.stringify(lotRstData))
          failedObj.loadingFailed=true
          failedObj.failedText=result.content
          this.$store.commit('setNewRstData', failedObj)
          return
        }
        var accountData = this.accountData
        accountData.money_usable=result.current_money
        this.$store.commit('setAccountData', accountData)
        this.$store.commit('setNewRstData', result)
      },
      err=>{
        lotRstData.loadingFailed=true
        lotRstData.failedText='投注超时，请重新下注'
        this.$store.commit('setNewRstData', lotRstData)
      })
			// websocketsend(agentData);
			this.sendOddsDlg = false;
		},
		navClick(index) {
			this.wanfOddsIndex = index;
			//清空投注数据
			this.checkedOddIndex = -1;
			this.checkedOdd = [];
			this.oddsWay = [];
			this.guessGY = [];
			this.checkedMoney = this.moneyList[0];
			this.checkedMoneyIdx = 0;
			this.totalMoney = 0;
			this.disableBtn = true;
		},
		subNavClick(names) {
			let nameArr = names.split("--");
			this.wanfOddsIndex = nameArr[0];
		},
		selectNum(num) {
			let result = 'gusessNum-' + num
			return result
		},
		minBetAdd() { // 最小投注的事件
			this.checkedMoney = Number(this.betLower)
			this.totalMoney = this.checkedMoney * this.checkedOdd.length;
			this.checkedMoneyIdx = null;
		}
	},
	components: {

	},
	watch: {
		oddsData:function(oldVal, newVal) {
			let f1Room = oldVal
			let that = this
			if(!_.isEmpty(f1Room)) {
				for (var i=0, len=that.wanfOddsList.length; i<len; i++) {
					console.log(that.wanfOddsList[i].name)
					if (!_.isEmpty(f1Room.panel_1) && that.wanfOddsList[i].name == '猜双面') {
						for (var k=0, kLen=that.wanfOddsList[i].list.length; k<kLen; k++) {
							for (var key in f1Room.panel_1) {
								if (that.wanfOddsList[i].list[k].subName == key) {
									that.wanfOddsList[i].list[k].subList = f1Room.panel_1[key];
								}
							}
						}
					} else if (!_.isEmpty(f1Room.panel_2) && (that.wanfOddsList[i].name == '猜车号' || that.wanfOddsList[i].name == '猜号码')) {
						for (var k=0, kLen=that.wanfOddsList[i].list.length; k<kLen; k++) {
							for (var key in f1Room.panel_2) {
								if (that.wanfOddsList[i].list[k].subName == key) {
									that.wanfOddsList[i].list[k].subList = f1Room.panel_2[key];
								}
							}
						}
					} else if (!_.isEmpty(f1Room.panel_6) && (that.wanfOddsList[i].name == '猜龙虎')) {
						for (var k=0, kLen=that.wanfOddsList[i].list.length; k<kLen; k++) {
							for (var key in f1Room.panel_6) {
								if (that.wanfOddsList[i].list[k].subName == key) {
									that.wanfOddsList[i].list[k].subList = f1Room.panel_6[key];
								}
							}
						}
					} else if (!_.isEmpty(f1Room.panel_4) && (that.wanfOddsList[i].name == '猜庄闲')) {
						for (var k=0, kLen=that.wanfOddsList[i].list.length; k<kLen; k++) {
							for (var key in f1Room.panel_4) {
								if (that.wanfOddsList[i].list[k].subName == key) {
									that.wanfOddsList[i].list[k].subList = f1Room.panel_4[key];
								}
							}
						}
					} else if (!_.isEmpty(f1Room.panel_5) && (that.wanfOddsList[i].name == '猜冠亚')) {
						var qiu = 11;
						for (var t=1,tLen=qiu; t<tLen; t++) {
							var odds = {
								title: t,
								value: f1Room.panel_5[0].value
							}
							that.wanfOddsList[i].list[0].subList.push(odds);
						}
					} else if (!_.isEmpty(f1Room.panel_3) && (that.wanfOddsList[i].name == '冠亚和')) {
						for (var k=0, kLen=that.wanfOddsList[i].list.length; k<kLen; k++) {
							for (var key in f1Room.panel_3) {
								if (that.wanfOddsList[i].list[k].subName == key) {
									that.wanfOddsList[i].list[k].subList = f1Room.panel_3[key];
								}
							}
						}
					}
				}
			}
			console.log(this.wanfOddsList, 'this.wanfOddsList')
		},
		lDragonData: function(newVal, oldVal) {
			if (newVal) {
				for (var i=0; i<this.wanfOddsList.length; i++) {
					if (this.wanfOddsList[i].name == '长龙投注') {
						this.wanfOddsList.splice(i,1)
						this.methodsArr.splice(i,1)
					}
				}
				if (newVal.length > 0) {
					this.wanfOddsList.push({
						name:"长龙投注",
						list:[{
								subName: '',
								subList: newVal
							}
						]
					})
					this.methodsArr.push('长龙投注')
						if (this.wanfOddsList[this.wanfOddsIndex].name == '长龙投注') {
						this.playMethod = newVal
					}
				}
			}
			
		},
		timeMessages:function(oldVal, newVal) {
			this.issue = oldVal.issue;
		},
		cRoomData:function(oldVal, newVal) {
			if (!_.isEmpty(oldVal)) {
				let dataArr = oldVal.p_room;
				for (var i = 0; i < dataArr.length; i++) {
				        if (this.roomId == dataArr[i].id||this.roomId == dataArr[i].idd) {
				          this.betLower = dataArr[i].lower;
				          if (dataArr[i].odds_exp == undefined || dataArr[i].odds_exp == "") {
				            this.RoomDateList = "暂无数据";
				          } else {
				            this.RoomDateList = dataArr[i].odds_exp;
				          }
				        }
				      }
			}
		},
		BetmoneyList:function(oldVal, newVal) {
			this.moneyList = oldVal
			this.checkedMoney = this.moneyList[0]
		},
		checkedMoney: function(newVal, oldVal){
			this.totalMoney = this.checkedOdd.length*newVal
		}
	},
	deactivated() {

	},
	beforeDestroy() {

	}
}
</script>

<style scoped>
    .clUl>div{width: 100%;}
    .oddsTable{
      width: 100%; 
      line-height: 24px
    }
    .oddsTable td{
      text-align: center;
      
    }
    .playList{
      font-size: 14px;
    }
    .chooseSytle:hover{
        background: #ffd6d1;
        border: 1px solid #f3596a !important;
    }
    .chooseSytle p:first-child{
      color: #48484C;
      font-size: 14px;
    }
    .chooseSytle p:last-child{
      color: #f3596a;
    }
    .checkedStyle{
        background: #ffd6d1;
        border: 1px solid #f3596a !important;
        
    }
    .checkedStyle p{
      color: #f3596a !important;
    }
    .ckMoneyStyle{
        position: relative;
        top: -6px;
        border-radius: 50%;
        box-shadow: 0px 0px 10px #FFEC00;
    }
.choosetoplayleft {
  height: 760px;
  width: 90px;
  background-color: #f9f9f9;
  text-align: center;
   line-height: 50px;
}
.choosetoplayleft .choosetheplay {
  width: 90px;
  height: 50px;
  font-weight: 600;
  font-size: 16px;
}
.choosetoplayleft > ul {
  position: relative;
}
.choosetoplayleft > ul > li {
  cursor: pointer;
  
}
.choosetoplayleft > ul > li a{
    color:#495060;
}
.choosetoplayleft > ul > li .otherf1{
    width: 100%;
    height: 100%;
    display: inline-block;
}
.choosetoplayleft > ul > li:hover {
  background: #ececec;
  
}

.choosetoplayleft > ul .sort {
  position: absolute;
  top: 0;
  right: -90px;
  background-color: red;
}
.choosetoplayleft > ul .sort ul li {
  width: 90px;
  height: 50px;
}
i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 40px;
  margin-top: -20px;
  border: 1px solid #ccc;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  /* background: url('../../../../assets/images/spirt.png') 0 131px; */
  cursor: pointer;
  z-index: 999;
}
.choosetoplaycenter {
  position: relative;
  width: 322px;
}
.choosetoplaycenter .centermain {
  height: 510px;
  overflow: auto;
}
.choosetoplaycenter .centermain .top {
  height: 50px;
}
.choosetoplaycenter .centermain .top ul {
  box-sizing: border-box;
  width: 280px;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-around;
}
.choosetoplaycenter .centermain .top ul li {
  line-height: 46px;
  text-align: center;
  color: #b8b8b8;
  font-size: 16px;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}
.choosetoplaycenter .centermain .center {
  position: relative;
  height: 50px;
}
.choosetoplaycenter .centermain .center ul {
  margin: 0 8px 0 10px;
  display: flex;
  justify-content: space-between;
}
.choosetoplaycenter .centermain .center ul li {
  text-align: center;
   line-height: 50px;
  position: relative;
}
.choosetoplaycenter .centermain .center ul li:first-child span {
  position: absolute;
  height: 16px;
  width: 4px;
  background-color: red;
  top: 17px;
  border-radius: 2px;
}
.choosetoplaycenter .centermain .center ul li:last-child em {
  position: absolute;
  top: 16px;
  left: -20px;
  width: 20px;
  height: 20px;
  /* background: url('../../../../assets/images/spirt.png') 0 247px; */
}
ul li:hover{
    cursor: pointer;
}
.choosetoplaycenter .centermain .bigorsmall,
.choosetoplaycenter .centermain .guessnumber {
  margin: 0 8px 0 8px;
}
.choosetoplaycenter .centermain .bigorsmall ul,
.choosetoplaycenter .centermain .guessnumber ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
.playMethod-list {
	margin-top: -10px;
}
.bigorsmall{position: relative;}
.choosetoplaycenter .centermain .bigorsmall ul li,
.choosetoplaycenter .centermain .guessnumber ul li {
  box-sizing: border-box;
  width: 59px;
  height: 50px;
  border-radius: 3.2px;
  border: solid 0.5px #c7c7c7;
  margin-top: 10px;
  font-size: 14px;
  margin-left: 13px;
}
.choosetoplaycenter .centermain .bigorsmall ul li p,
.choosetoplaycenter .centermain .guessnumber ul li p {
  line-height: 25px;
  text-align: center;
}
.bigorsmall ul li p:first-child{font-size: 16px}
.choosetoplaycenter .centermain .guessnumber .guessnumberlist li {
  width: 42px;
  height: 42px;
  border-radius: 90px;
  border: solid 0.5px #c7c7c7;
  margin-right: 4px;
}
.choosetoplaycenter .centermain .guessnumber .guessnumberlist li p:first-child {
  font-size: 19.8px;
  font-family: Helvetica;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0.2px;
  text-align: center;
  color: #48484c;
}
.choosetoplaycenter .centermain .guessnumber .guessnumberlist li p:last-child {
  font-family: PingFangSC;
  font-size: 10.8px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  text-align: center;
  color: #48484c;
  line-height: 10.8px;
}
.choosetoplaycenter .line {
  display: inline-block;
  margin: 0 26px 0 29px;
  width: 247px;
  height: 1px;
  background-color: #eee;
}
.choosetoplaycenter .choosetoplayfooter .havebet {
  height: 30px;
  margin-left: 5px;
  border-bottom: 1px solid #eee;
}
.choosetoplaycenter .choosetoplayfooter .havebet p {
  line-height: 30px;
  text-align: center;
  font-size: 14px;
}
.choosetoplaycenter .choosetoplayfooter .havebet p span {
  color: red;
}
.choosetoplaycenter .choosetoplayfooter .inputbet {
  margin: 10px 20px;
}
.choosetoplaycenter .choosetoplayfooter .inputbet input {
  height: 30px;
  width: 262px;
  font-size: 14px;
  border: 1px solid #eee;
}
.choosetoplaycenter .choosetoplayfooter .inputbet span{
  display: inline-block;
  width: 68px;
  text-align: right;
  color: #5DB2FF;
  font-size: 14px;
  cursor: pointer;
  line-height: 32px;  
}
.bet {
  position: relative;
  margin: 0 20px;
  height: 36px;
  
}
.bet em {
  position: absolute;
  height: 22px;
  width: 22px;
  left: -22px;
  top: 0px;
  /* background: url('../../../../assets/images/spirt.png') 0 204px; */
}
.bet ul {
  display: flex;
  justify-content: space-around;
}
.bet ul li {
  width: 36px;
  height: 35px;
  font-size: 12px;
  font-family: aril;
  font-weight: 600;
  /* border-bottom: 1px solid #48484c; */
  color: #48484c;
  line-height: 32px;
  text-align: center;
  background-repeat: no-repeat;
}
.bet ul li:nth-child(1){
  /* background: url('../../../../assets/images/chip-1@3x.png'); */
      
}
.bet ul li:nth-child(2){
  /* background: url('../../../../assets/images/chip-2@3x.png'); */
      
}
.bet ul li:nth-child(3){
  /* background: url('../../../../assets/images/chip-5@3x.png'); */
      
}
.bet ul li:nth-child(4){
  /* background: url('../../../../assets/images/chip-10@3x.png'); */
      
}
.bet ul li:nth-child(5){
  /* background: url('../../../../assets/images/chip-50@3x.png'); */
      
}
.bet ul li:nth-child(6){
  /* background: url('../../../../assets/images/chip-100@3x.png'); */
      
}
.reset {
  margin: 5px 0;
  text-align: center
}
.reset button:first-child {
  width: 100px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  padding: 0;
  border-radius: 2px;
}
.reset button:last-child {
  width: 62px;
  height: 30px;
  margin-left: 10px;
  border: none;
  background-color: white;
  color: #5db2ff;
}
.choosetoplaycenter > .shrink {
  border: 1px solid #ccc;
  border-right: 0px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -20px;
  width: 15px;
  height: 40px;
  /* background: url('../../../../assets/images/spirt.png') 0 178px; */
  cursor: pointer;
}
.choosedactive {
  background-color: #ececec;
  border-left: 4px solid red
}
.activebottomline {
  border-bottom: 4px solid red;
  color: #545454!important;
  font-weight: 600;
}
.tableTip{
  text-align:left;float:left;line-height:32px;
}
.tableTip span{
  color: #F3596A;
  padding: 0px 4px;
}
.zfInput{
  text-align: center;
  margin-bottom: 10px;
  margin-top: 20px;
}
.zfInput .ivu-input-number{
  margin: 0px 5px;
}
.moneyInput{
  width:80%;margin:0 auto;display:block;margin-bottom:10px;
}
.zhPanel2{
  margin-bottom: 16px;
}
.zhPanel2 .ivu-input-number{
  margin: 0px 5px;
}

.moneyInput2{
  width: 160px;
  margin: 0px 10px;
}
.resetBtn{
  border: none;
  background-color: white;
  color: #5db2ff;
}
.titlered{
  position: relative;
  border: none!important;
  padding: 15px 0;
}
.titlered>span{
    position: absolute;
    height: 16px;
    width: 4px!important;
    background-color: red;
    top:  17px;
    border-radius: 2px;
    display: inline-block;
}
.liTit {
	position: relative;
	padding-left: 10px;
}
.h3Tit h3 {
	position: relative;
	margin-top: 20px;
	margin-bottom: 15px;
	padding-left: 10px;
	line-height: 16px;
	font-size: 14px;
	font-weight: 200;
}
.liTit::before,
.h3Tit h3::before {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 0;
	width: 4px;
	height: 16px;
	background-color: red;
	border-radius: 2px;
	display: inline-block;
}
/* .guanyahe{
    display: inline-block;
    position: relative;
    padding: 15px 0;
} */
.guanyahe>p{
  padding-left: 3%;
  padding: 9px 0;
  border: solid 1px #c7c7c7;
  border-radius: 3.2px;
  margin-bottom: 8px
}
.guanyahe>p>span{
    display: inline-block;
    width: 55%;
    padding-left: 6px;
    text-align: center;
    
}
.guanyahe>p>span:nth-child(1){
    width: 20%; 
}
.guanyahe>p>span:nth-child(3){
    width: 20%;
    color: #f3596a;
}
.springF{
  position: relative;
  height: 25px;
}

.springF>span{
  display: inline-block;
  width: 18px!important;
  height: 18px!important;
  margin-right: 2px!important;
  /* background-image: url('../../../../assets/images/spirt.png') !important; */
  background-repeat: no-repeat;
  border-radius: 0%!important;
  margin-top: 6px;
}
.gusessNum-1{
  background-position:-361px -39px!important;
}
.gusessNum-2{
  background-position:-361px -59px!important;
}
.gusessNum-3{
  background-position:-361px -79px!important;
}
.gusessNum-4{
  background-position:-361px -99px!important;
}
.gusessNum-5{
  background-position:-361px -119px!important;
}
.gusessNum-6{
  background-position:-361px -139px!important;
}
.gusessNum-7{
  background-position:-361px -159px!important;
}
.gusessNum-8{
  background-position:-361px -179px!important;
}
.gusessNum-9{
  background-position:-361px -199px!important;
}
.gusessNum-10{
  background-position:-361px -219px!important;
}
.resetBtn{
  border: none;
  background-color: white;
  color: #5db2ff;
}
.btnBox button{
  display: block;
  margin: 0 auto;
}
.choosetoplaycenter .centermain .center ul li:nth-child(2):hover{
  color: #f3596a;
}
.tableNoData{
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leftBar{display: flex;width: 412px}
.zjjtP{text-align: right;padding: 8px 4px;}
</style>
<style>
    .playList .ivu-select-dropdown{
        left: 92px!important;
    }
    .playList .ivu-dropdown-rel>a{
        display: inline-block;
        width:100%;
        height: 100%;
    }
    .playList .ivu-dropdown{
      width: 100%;
    }
    .playList .ivu-select-dropdown{
        width: auto;
    }
</style>





// WEBPACK FOOTER //
// src/components/room/playMethods/beiJingPK10/pk10.vue